<template>
	<view class="set">

		<view class="list common">
			<view class="item" @click="this.phoneShow = true">
				<view class="left-info">
					<u-icon name="shouji" custom-prefix="baojie" size="35rpx" class="info-icn" />
					更换手机号
				</view>
				<view class="right-arrow">
					<u-icon name="arrow-right" color="#D6D6D6" />
				</view>
			</view>
			<view class="item" @click="this.logOutShow = true">
				<view class="left-info">
					<u-icon name="minus-circle" size="35rpx" class="info-icn" />
					注销账户
				</view>
				<view class="right-arrow">
					<u-icon name="arrow-right" color="#D6D6D6" />
				</view>
			</view>
		</view>

		<view class="list common">
			<view class="item" @click="ToAbout">
				<view class="left-info">
					<u-icon name="shu" custom-prefix="baojie" size="35rpx" class="info-icn" />
					关于我们
				</view>
				<view class="right-arrow">
					<u-icon name="arrow-right" color="#D6D6D6" />
				</view>
			</view>
			<view class="item" @click="ToUserpact">
				<view class="left-info">
					<u-icon name="yonghuxieyi" custom-prefix="baojie" size="35rpx" class="info-icn" />
					服务协议
				</view>
				<view class="right-arrow">
					<u-icon name="arrow-right" color="#D6D6D6" />
				</view>
			</view>
		</view>

		<view class="list common">
			<view class="item" @click="this.noticShow = true">
				<view class="left-info">
					<u-icon name="bell" class="info-icn" size="35rpx" />
					通知开启
					<view class="tips">
						开启后可及时接收师傅服务进度，订单通知
					</view>
				</view>
				<view class="right-arrow">
					{{ProfileObj.switch === 0 ? '已关闭' : '已开启'}}
					<u-icon name="arrow-right" color="#D6D6D6" />
				</view>
			</view>
			<view class="item" @click="this.cacheShow = true">
				<view class="left-info">
					<u-icon name="lajixiang" custom-prefix="baojie" size="35rpx" class="info-icn" />
					清除缓存
				</view>
				<view class="right-arrow">
					{{storagesize}}
					<u-icon name="arrow-right" color="#D6D6D6" />
				</view>
			</view>
			<view class="item" @click="this.versionShow = true">
				<view class="left-info">
					<u-icon name="rocket" custom-prefix="baojie" size="35rpx" class="info-icn" />
					当前版本
				</view>
				<view class="right-arrow">
					{{version}}
					<u-icon name="arrow-right" color="#D6D6D6" />
				</view>
			</view>
		</view>
		<view class="btn" @click="this.Outshow = true">
			退出登录
		</view>

		<!-- 更换手机号弹窗 -->
		<u-popup v-model="phoneShow" mode="center" border-radius="30">
			<view class="model-box">
				<view class="title">更换手机号</view>

				<view class="input-box">
					<input v-model="alter.mobile" placeholder="请输入当前注册手机号" class="input"></input>
				</view>

				<view class="btn-box">
					<button type="primary" size="mini" class="btn" @click="doMObile">确定</button>
				</view>
			</view>
		</u-popup>


		<!-- 注销账户弹窗 -->
		<u-popup v-model="logOutShow" mode="center" border-radius="30">
			<view class="model-box model-two">
				<view class="title">注销账户</view>

				<view class="input-box">
					<input v-model="logoff.mobile" placeholder="请输入当前注册手机号" class="input"></input>
					<view class="bom-box">
						<input v-model="logoff.captcha" placeholder="请输入短信验证码" class="input inttwo"></input>
						<view class="upbtn" v-if="codeis" @click="doCode">获取验证码</view>
						<view class="time" v-else>{{time}}秒后重新获取</view>
					</view>
				</view>

				<view class="btn-box">
					<button type="primary" size="mini" class="btn" @click="doLoginff">确定</button>
				</view>
			</view>
		</u-popup>

		<!-- 清除缓存弹窗 -->
		<u-popup v-model="cacheShow" mode="center" border-radius="30">
			<view class="model-box model-three">
				<view class="title">清除缓存</view>

				<view class="txt">确定要清除所有缓存？</view>

				<view class="btn-box">
					<button size="mini" class="btn btnone" @click="this.cacheShow = false">取消</button>
					<button size="mini" class="btn" @click="clearstor">确定</button>
				</view>
			</view>
		</u-popup>

		<!-- 修改配置 -->
		<u-popup v-model="noticShow" mode="center" border-radius="30">
			<view class="model-box model-three">
				<view class="title">通知开启</view>
				<view class="txt">要开启通知吗？</view>
				<view class="btn-box">
					<button size="mini" class="btn btnone" @click="donoticone">关闭</button>
					<button size="mini" class="btn" @click="donotictwo">开启</button>
				</view>
			</view>
		</u-popup>

		<!-- 当前版本 -->
		<u-popup v-model="versionShow" mode="center" border-radius="30">
			<view class="model-box model-three">
				<view class="title">当前版本</view>
				<view class="txt">{{versiontxt}}</view>
				<view class="btn-box">
					<button size="mini" class="btn btnone" @click="this.versionShow = false">取消</button>
					<button size="mini" class="btn" @click="doversion">确定</button>
				</view>
			</view>
		</u-popup>

		<!-- 退出登录提示 -->
		<u-modal v-model="Outshow" :mask-close-able="true" title="退出登录" content="确定要退出吗？" @confirm="confirm"></u-modal>
	</view>
</template>

<script>
	import { ResLogoff, ResCheck, ResProfile, ResRemind, ResCommon } from '@/untils/api.js'
	export default {
		data() {
			return {
				alter: {
					mobile: ''
				},
				logoff: {
					mobile: '',
					captcha: ''
				},
				codeis: true,
				time: 60,
				Outshow: false,
				phoneShow: false,
				logOutShow: false,
				cacheShow: false,
				noticShow: false,
				versionShow: false,
				storagesize: '',
				storageInfo: {},
				ProfileObj: {
					type: '官方消息推送',
					switch: 0
				},
				version: uni.getStorageSync('version') || '',
				newversion: ''

			}
		},
		computed: {
			versiontxt() {
				return this.newversion > this.version ? '当前不是最新版本,请更新最新版本' : '当前已是最新版本'
			}
		},
		onShow() {
			this.storageInfo = uni.getStorageInfoSync();
			this.storagesize = this.storageInfo.currentSize;
			if (this.storagesize < 1024) {
				this.storagesize += 'KB'
			} else if (this.storagesize > 1024) {
				let newsize = Math.floor(this.storagesize / 1000)
				this.storagesize = newsize + 'MB'

			}

		},
		onLoad() {
			this.getCommon()
		},
		methods: {
			doversion() {
				this.versionShow = false
			},
			async getCommon() {
				const { data: res } = await ResCommon()
				this.newversion = res.data.version
			},
			// 通知开启
			donoticone() {
				this.ProfileObj.switch = 0
				this.getProfile()
				this.noticShow = false
			},
			donotictwo() {
				this.ProfileObj.switch = 1
				this.getProfile()
				this.noticShow = false
			},
			async getProfile() {
				const { data: res } = await ResProfile(this.ProfileObj)
				console.log(res, '修改配置');
			},
			// 清除缓存
			clearstor() {
				uni.clearStorageSync();
				uni.$showMsg('清除成功')
				this.storagesize = this.storageInfo.currentSize;
				this.cacheShow = false
			},
			ToAbout() {
				uni.navigateTo({
					url: '/pages/My/About'
				})
			},
			ToUserpact() {
				uni.navigateTo({
					url: '/pages/My/Userpact'
				})
			},
			// 修改手机号
			async doMObile() {
				// 定义正则
				let reg = /^((13[0-9])|(14[0-9])|(15[0-9])|(17[0-9])|(18[0-9]))\d{8}$/;
				// 非空判断
				if (!this.alter.mobile) return uni.$showMsg('请输入手机号码！')
				// 校验正则
				if (reg.test(this.alter.mobile)) {
					const { data: res } = await ResProfile(this.alter)
					uni.$showMsg(res.msg)
					// 清空表单
					this.alter.mobile = ''
					this.phoneShow = false
				} else {
					uni.$showMsg('请输入正确的11位手机号码！')
				}
			},
			// 退出登录
			confirm() {
				this.$store.commit('RemoUserInfo')
				this.$store.commit('RemoToken')
				uni.navigateBack()
			},

			// 发送验证码
			async doCode() {
				let reg = /^((13[0-9])|(14[0-9])|(15[0-9])|(17[0-9])|(18[0-9]))\d{8}$/;
				if (!this.logoff.mobile) return uni.$showMsg('请输入手机号码！')
				if (reg.test(this.logoff.mobile)) {
					this.codeis = false
					setInterval(() => {
						this.time--
						if (this.time == 0) {
							this.codeis = true
							this.time = 60
						}
					}, 1000)
					// 发送验证码
					const { data: res } = await ResSend(this.mobile)
					if (res.code != 1) return uni.$showMsg(res.msg)
				} else {
					uni.$showMsg('请输入正确的11位手机号码！')
				}

			},
			// 检验手机号码并注销
			async doLoginff() {
				let reg = /^((13[0-9])|(14[0-9])|(15[0-9])|(17[0-9])|(18[0-9]))\d{8}$/;
				// 非空判断
				if (!this.logoff.mobile) return uni.$showMsg('请输入手机号码！')
				if (!this.logoff.captcha) return uni.$showMsg('请输入验证码！')
				// 正则校验
				if (reg.test(this.logoff.mobile)) {
					// 检测验证码
					const { data: resa } = await ResCheck(this.logoff)
					if (res.code != 1) return uni.$showMsg(res.msg)
					// 发起请求注销账号
					const { data: resb } = await ResLogoff()
					if (res.code != 1) return uni.$showMsg(res.msg)
					// 清空表单
					this.logoff.mobile = ''
					this.logoff.captcha = ''
					this.this.logOutShow = false
				} else {
					uni.$showMsg('请输入正确的11位手机号码！')
				}
			},

		}
	}
</script>

<style lang="scss" scoped>
	.common {
		padding: 0 24rpx;
		box-sizing: border-box;
	}

	.set {
		font-family: PingFangSC-Regular, PingFang SC;
		background-color: #F7F7F7;
		height: 1400rpx;
		overflow: hidden;
	}



	.set .list {
		font-size: 28rpx;
		font-weight: 400;
		margin-top: 14rpx;
		color: #343434;
		background-color: #FFF;
	}

	.set .list .item {
		display: flex;
		justify-content: space-between;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #F4F4F4;

		.left-info {
			.info-icn {
				margin-right: 12rpx;
			}
		}
	}

	.set .list .item .right-arrow {
		color: #A1A1A1;
		font-weight: 400;
		font-size: 24rpx;
	}

	.tips {
		margin-left: 38rpx;
		font-size: 22rpx;
		font-weight: 400;
		color: #A1A1A1;
	}

	.btn {
		width: 688rpx;
		height: 115rpx;
		line-height: 115rpx;
		text-align: center;
		background: #FFFFFF;
		border-radius: 58rpx;
		margin: 0 auto;
		font-size: 30rpx;
		font-weight: 400;
		color: #3B3B3B;
		margin-top: 30rpx;
	}

	.model-box {
		width: 638rpx;
		height: 379rpx;
		padding: 30rpx 60rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.title {
			text-align: center;
			font-weight: 700;

		}

		.txt {
			text-align: center;
		}

		.input-box {
			margin: 20rpx 0;


			.input {
				border-bottom: 1px solid #F2F2F2;
				padding-bottom: 10rpx;
				margin-top: 30rpx;
			}

			.bom-box {
				display: flex;
				align-items: center;
				border-bottom: 1px solid #F2F2F2;

				.inttwo {
					border-bottom: 0;
				}

				.upbtn,
				.time {
					flex: 1;
					color: #989898;
					font-size: 24rpx;
					text-align: right;
					// border: 1px solid #F2F2F2;
				}
			}


		}


		.btn-box {
			text-align: center;
			display: flex;


			.btn {
				width: 253rpx;
				height: 83rpx;
				line-height: 83rpx;
				border-radius: 60rpx;
				background-color: #01C3A8;
				color: #fff;
			}




		}
	}

	.model-two {
		height: 430rpx;
	}

	.model-three {

		.btn-box {

			.btnone {
				background-color: #F7F7F7;
				margin-right: 32rpx;
				border: #F7F7F7 1px solid;
				color: #212121;
			}

			button.btnone::after {
				display: none;
				border: none;
			}
		}
	}
</style>
